<template>
  <div id="app">
    <HelloWorld msg="讨厌，死鬼">
      <!-- 1.为默认插槽传标签：标签不指定 子组件的 插槽名字 -->
      <!-- <h1>别墅0号</h1> -->

      <!-- 2.为具名插槽传标签：通过 slot 指定 向 同名插槽 传标签 -->
      <h1 slot="house1">别墅1号</h1>
      <h1 slot="house2">别墅2号</h1>
      <!-- 注意：如果用 template标签，推荐使用 #插槽名字 方式 -->
      <!-- <template #house1>
        <h1>别墅2号</h1>
      </template> -->

      <!-- 3.为作用域插槽传标签 ------------------------------->
      <!-- 3.1 为 默认作用域插槽 传标签 ------------>
      <template v-slot="house">
        <h2>{{ house.dogname }}</h2>
        <h2>{{ house.catname }}</h2>
      </template>

      <!-- 3.2 为 具名作用域插槽 传标签 ------------>
      <!-- <template slot="banzhan" v-slot="person"> 报错！-->
      <template #banzhan="person">
        <h1>{{ person.aihao }}是宇宙超级无敌大帅哥~</h1>
        <h1>{{ person.aihao2 }}是宇宙超级无敌大帅哥~</h1>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      isShow: true,
      msg: "昨晚去哪啦？",
    };
  },
};
</script>

<style lang="less">
#app {
  text-align: center;
  padding: 10px;
  width: 500px;
  color: #2c3e50;
  margin: 50px auto;
  border: 2px solid red;
}
</style>
